<template>
  <transition name="el-zoom-in-center" v-loading="handleloading">
    <div class="create-pro transition-box">
      <div style="margin-left:20px;padding:10px 0;">
        <el-button @click="addNodeFormField" type="primary">增加</el-button>
      </div>
      <el-row :gutter="10">
        <el-table ref="dragTable" :data="columns" row-key="columnId" height="600px" :header-cell-style="{background:'#fafafa'}" :border="true">
          <el-table-column
            label="序号"
            type="index"
            width="60"
            class-name="allowDrag"
            align="center"
          />
          <el-table-column
            :resizable="true"
            label="字段列名"
            prop="fieldName"
            width="150"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            :resizable="true"
            label="驼峰字段名"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-input v-model="scope.row.camelFieldName"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            :resizable="true"
            label="字段类型"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-select v-model="scope.row.dbType">
                <el-option label="tinyint" value="tinyint"/>
                <el-option label="int" value="int"/>
                <el-option label="bigint" value="bigint"/>
                <el-option label="float" value="float"/>
                <el-option label="double" value="double"/>
                <el-option label="decimal" value="decimal"/>
                <el-option label="char" value="char"/>
                <el-option label="varchar" value="varchar"/>
                <el-option label="text" value="text"/>
                <el-option label="longtext" value="longtext"/>
                <el-option label="date" value="date"/>
                <el-option label="datetime" value="datetime"/>
                <el-option label="timestamp" value="timestamp"/>
                <el-option label="blob" value="blob"/>
                <el-option label="longblob" value="longblob"/>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            :resizable="true"
            label="字段长度"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-input v-model="scope.row.dbLength"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="字段注释" width="150" align="center"  :resizable="true">
            <template #default="scope">
              <el-input v-model="scope.row.fieldTxt"></el-input>
            </template>
          </el-table-column>
          <el-table-column
           :resizable="true"
            label="权限字段"
            width="200"
            align="center"
          >
            <template #default="scope">
              <el-input v-model="scope.row.authDisabled"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="表单显示" width="100" align="center">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.formShow"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="列表显示" width="100" align="center">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.listShow"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="序号" width="100" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.orderNum"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="控件类型" width="150" align="center"  :resizable="true">
            <template #default="scope">
              <el-select v-model="scope.row.gmType">
                <el-option label="富文本编辑器" value="editor"/>
                <el-option label="文件上传" value="fileUpload"/>
                <el-option label="图片上传" value="imageUpload"/>
                <el-option label="菜单分类" value="menuItems"/>
                <el-option label="单选框" value="radio"/>
                <el-option label="复选框" value="checkbox"/>
                <el-option label="下拉框" value="select"/>
                <el-option label="文本框" value="input"/>
                <el-option label="文本域" value="textarea"/>
                <el-option label="日期控件" value="datetime"/>
                <el-option label="树形字典" value="tree"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否静态" width="100" align="center">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isStatics"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="是否查询" width="100" align="center">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.searchShow"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="查询方式" width="150" align="center"  :resizable="true">
            <template #default="scope">
              <el-select v-model="scope.row.searchRel">
                <el-option label="=" value="EQ"/>
                <el-option label="!=" value="NE"/>
                <el-option label=">" value="GT"/>
                <el-option label=">=" value="GTE"/>
                <el-option label="<" value="LT"/>
                <el-option label="<=" value="LTE"/>
                <el-option label="LIKE" value="LIKE"/>
                <el-option label="BETWEEN" value="BETWEEN"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否必填" width="100" align="center">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.required"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="默认值" width="150" align="center"  :resizable="true">
            <template #default="scope">
              <el-input v-model="scope.row.defaultValue"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="权限控制" width="100" align="center"  :resizable="true">
            <template #default="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.permission"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="字典类型" width="150" align="center"  :resizable="true">
            <template #default="scope">
              <el-select v-model="scope.row.dicType" clearable filterable placeholder="请选择">
                <el-option
                  v-for="dict in dictOptions"
                  :key="dict.dictType"
                  :label="dict.dictName"
                  :value="dict.dictType"
                >
                  <span style="float: left">{{ dict.dictName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作"  align="center" fixed="right">
            <template #default="scope">
              <el-button @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <Pagination
          class="pageChange"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pagination"
        />-->
      </el-row>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </div>
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog
        :title="title"
        v-model="open"
        width="680px"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="表id" prop="tableId">
                <el-input v-model="form.tableId" disabled placeholder="请输入表id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字段列名" prop="fieldName" v-if="true">
                <el-input v-model="form.fieldName" placeholder="请输入字段名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="驼峰字段名" prop="camelFieldName" v-if="true">
                <el-input v-model="form.camelFieldName" placeholder="请输入驼峰字段名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字段类型" prop="dbType" v-if="true">
                <el-select v-model="form.dbType">
                  <el-option label="tinyint" value="tinyint"/>
                  <el-option label="int" value="int"/>
                  <el-option label="bigint" value="bigint"/>
                  <el-option label="float" value="float"/>
                  <el-option label="double" value="double"/>
                  <el-option label="decimal" value="decimal"/>
                  <el-option label="char" value="char"/>
                  <el-option label="varchar" value="varchar"/>
                  <el-option label="text" value="text"/>
                  <el-option label="longtext" value="longtext"/>
                  <el-option label="date" value="date"/>
                  <el-option label="datetime" value="datetime"/>
                  <el-option label="timestamp" value="timestamp"/>
                  <el-option label="blob" value="blob"/>
                  <el-option label="longblob" value="longblob"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字段长度" prop="dbLength" v-if="true">
                <el-input v-model="form.dbLength" placeholder="请输入字段长度"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限字段" prop="authDisabled" v-if="true">
                <el-input v-model="form.authDisabled" placeholder="请输入权限字段"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字段注释" prop="fieldTxt" v-if="true">
                <el-input v-model="form.fieldTxt" placeholder="请输入字段注释"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="表单显示" prop="formShow" v-if="true">
                <el-radio-group v-model="form.formShow" size="medium">
                  <el-radio
                    v-for="(item, index) in sfsqhbOptions"
                    :key="index"
                    :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="列表显示" prop="listShow" v-if="true">
                <el-radio-group v-model="form.listShow" size="medium">
                  <el-radio
                    v-for="(item, index) in sfsqhbOptions"
                    :key="index"
                    :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="序号" prop="orderNum" v-if="true">
                <el-input v-model="form.orderNum" placeholder="请输入序号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="控件类型" prop="gmType" v-if="true">
                <el-select v-model="form.gmType">
                  <el-option label="富文本编辑器" value="editor"/>
                  <el-option label="文件上传" value="fileUpload"/>
                  <el-option label="图片上传" value="imageUpload"/>
                  <el-option label="菜单分类" value="menuItems"/>
                  <el-option label="单选框" value="radio"/>
                  <el-option label="复选框" value="checkbox"/>
                  <el-option label="下拉框" value="select"/>
                  <el-option label="文本框" value="input"/>
                  <el-option label="文本域" value="textarea"/>
                  <el-option label="日期控件" value="datetime"/>
                  <el-option label="树形字典" value="tree"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否静态" prop="isStatics" v-if="true">
                <el-radio-group v-model="form.isStatics" size="medium">
                  <el-radio
                    v-for="(item, index) in sfsqhbOptions"
                    :key="index"
                    :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否查询" prop="searchShow" v-if="true">
                <el-radio-group v-model="form.searchShow" size="medium">
                  <el-radio
                    v-for="(item, index) in sfsqhbOptions"
                    :key="index"
                    :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="查询方式" prop="searchRel" v-if="true">
                <el-select v-model="form.searchRel">
                  <el-option label="=" value="EQ"/>
                  <el-option label="!=" value="NE"/>
                  <el-option label=">" value="GT"/>
                  <el-option label=">=" value="GTE"/>
                  <el-option label="<" value="LT"/>
                  <el-option label="<=" value="LTE"/>
                  <el-option label="LIKE" value="LIKE"/>
                  <el-option label="BETWEEN" value="BETWEEN"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否必填" prop="required" v-if="true">
                <el-radio-group v-model="form.required" size="medium">
                  <el-radio
                    v-for="(item, index) in sfsqhbOptions"
                    :key="index"
                    :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认值" prop="defaultValue" v-if="true">
                <el-input v-model="form.defaultValue" placeholder="请输入默认值"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限控制" prop="permission" v-if="true">
                <el-radio-group v-model="form.permission" size="medium">
                  <el-radio
                    v-for="(item, index) in sfsqhbOptions"
                    :key="index"
                    :label="item.value"
                  >{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="字典类型" prop="dicType" v-if="true">
                <el-select v-model="form.dicType" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="dict in dictOptions"
                    :key="dict.dictType"
                    :label="dict.dictName"
                    :value="dict.dictType"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </transition>
</template>

<script>
//API接口
import api from "@/api";
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
//分页
import Pagination from "@/components/Pagination/index.vue";
export default {
  name: "GenEdit",
  props: {
    formList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: { Pagination },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 弹出层标题
      title: "新增",
      // 是否显示弹出层
      open: false,
      loading: false, //加载状态
      //控制表单的显示与否
      handleloading: false,
      DialogShow: false,
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表列信息
      columns: [],
      // 字典信息
      dictOptions: [],
      queryParams: {
        //查询参数
        // pageNum: 1,
        // pageSize: 10,
      },
      total: 0, //总条目数
      sfsqhbOptions: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ]
    };
  },
  created() {
    /** 查询字典下拉列表 */
    getDictOptionselect().then(response => {
      this.dictOptions = response.data;
    });
  },
  /**
   * 挂载函数
   */
  mounted() {
    //调用表格数据方法
    this.queryParams.tableId = this.formList.id;
    this.getList();
  },
  methods: {
    /**添加 */
    addNodeFormField() {
      this.open = true;
      this.form.tableId = this.formList.id;
    },
    /**
     * 删除数据
     * @param {Object} node
     */
    handleDelete(node) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //调用删除接口
          api.sysFormField
            .del(node.id)
            .then(res => {
              //重新获取列表
              this.getList();
              //弹出提示
              this.$message.success(res.msg);
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        })
        .catch(err => {
          this.$message.info("已取消");
        });
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**
     * 获取表格列表
     */
    async getList() {
      //设置Loding状态
      this.loading = true;
      //调用列表查询接口
      api.sysFormField.list(this.queryParams).then(res => {
        //判断返回状态
        if (res.code) {
          //设置列表数据
          this.columns = res.rows;
          //设置总条目数
          this.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
        //loading结束
        this.loading = false;
      }).catch(err=>{
        this.$message.error(err.msg)
      });
    },
    /** 提交按钮 */
    submitForm() {
      api.sysFormField
        .BulkEdit(this.columns)
        .then(res => {
          this.$message.success(res.msg);
          this.$parent.FlagShow = false;
          this.$emit("ok");
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    /**新增的确定 */
    confirm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          api.sysFormField
            .add(this.form)
            .then(res => {
              this.getList()
              this.open = false;
              this.$refs.form.resetFields();
              this.$message.success(res.msg);
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        }
      });
    },
    /** 关闭按钮 */
    close() {
      this.$parent.FlagShow = false;
    },
    cancel() {
      this.open = false;
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-footer {
  text-align: center;
  padding: 50px 0;
}
.pageChange {
  position: relative;
  left: 95%;
}
</style>

